<template>
  <div class="div-box">
    <dv-digital-flop :config="config" style="width: 200px; height: 50px" />
    <!-- <dv-digital-flop v-show="!showNum" :config="config1" style="width: 200px; height: 50px" /> -->
    <span
      class="rotateSpan"
      :style="[textStyle, { fontSize: textStyle.fontSize + 'px' }]"
      >{{ obj.name }}</span
    >
  </div>
</template>
<script>
export default {
  data() {
    return {
      config: {
        number: [100],
        content: "{nt}",
        style: {
          fontSize: 30,
          fill: "#3de7c9"
        }
      },
      textStyle: {
        fontSize: 20,
        color: "#fff"
      },
      showNum:true
    };
  },
  props: {
    obj: {
      type: Object,
      default: () => {
        return {
          value: 12,
          name: "hello"
        };
      }
    }
  },
  mounted() {
    this.$bus.$on("updateNumData", data => {
      this.config = { ...this.config, ...data };
    });
    this.$bus.$on("updateTextData", data => {
      this.textStyle = { ...this.textStyle, ...data };
    });
    this.$bus.$on("updateContent", data => {
       this.config = { ...this.config, ...data };
    });
  },
  watch: {
    obj(val) {
      if (val && val.name) {
        this.config.number = [val.value];
        this.config = { ...this.config };
      }
    },
    // config(val){

    // }
    // config: {
    //   handler(val) {
    //     console.log("谢谢谢谢谢谢谢谢", val);
    //     this.$nextTick(() => {
    //       this.config1 = { ...val };
    //       console.log("jhfjsdkhfjksd", this.config1);
    //     });
    //   },
    //   deep: true,
    //   immediate: true
    // }
  }
};
</script>
<style scoped>
.div-box {
  display: inline-block;
  text-align: center;
}
.rotateSpan {
  display: inline-block;
  border-radius: 50%;
  color: #fff;
  animation: rotate 2s infinite;
}
@keyframes rotate {
  from {
    transform: rotateY(360deg);
  }
  to {
    transform: rotateY(0deg);
  }
}
</style>
